<template>
  <div ref="echarts"
       class="echarts"
       style="margin:0,padding:0"
       :style="{width, height}"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
    options: Object,
    data: null,
    notMerge: Boolean
  },
  watch: {
    data (newVal) {
      this.redraw()
    },
    options (newVla) {
      // console.log(newVal, 'echarts');
      this.redraw()
    }
  },
  computed: {
    myOptions () {
      return this.options || {}
    }
  },
  data () {
    return {
      myChart: null
    };
  },
  mounted () {
    this.init()
  },
  destroyed () {
    // 销毁页面清除方法
    window.onresize = null
  },
  methods: {
    init () {
      this.myChart = echarts.init(this.$refs.echarts)
      this.myChart.setOption(this.myOptions, this.notMerge)
      window.onresize = () => this.myChart.resize()
    },
    // 重绘  
    redraw () {
      if (!this.myOptions) return
      this.options.dataset.source = this.data
      this.myChart.setOption(this.myOptions, this.notMerge)
      this.myChart.resize()
    },
    // 没有数据源的重绘
    resize () {
      this.myChart.setOption(this.myOptions)
      this.myChart.resize()
    }
  },
}
</script>

<style lang='scss' scoped>
.echarts {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}
</style>